<template>
	<view class="container">
		<view
			:class="[grade===0?'status1':'',grade==1?'status2':'',grade==2?'status3':'',grade==3?'status4':'',grade==4?'status5':'','topRound'] ">
			<view class="nav" :style="{'color':(grade==4)?'#fff':'#000'}">
				<view class="icon-back" @click="back">
					<uni-icons v-if="grade==4" type="back" color="#fff" size="30"></uni-icons>
					<uni-icons v-else type="back" color="#000" size="30"></uni-icons>
				</view>
				<span class="title-score">评分</span>
				<span @click="goRule()" class="rule">评分规则</span>
			</view>
			<!-- <jerryGauge class="round" :sonRefresh="sonRefresh" @getGrade="getGrade"
				@getIsPayAccelerated="getIsPayAccelerated" @getAccelerated="getAccelerated"
				@getRecoverTours="getRecoverTours" @getRecoverDay="getRecoverDay" @getMoney="getMoney">
			</jerryGauge> -->
			<view class="round" v-if="!isShowCanvasImage">
				<view class="gauge-container">
					<canvas class="canvas" canvas-id="score"></canvas>
				</view>
			</view>
			<view class="round" v-else>
				<view class="gauge-container">
					<image :src="canvasImage" mode="" style="width: 340px;height: 340px;"></image>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="change">
				<view class="btn">
					<button :class="changeTitle === 0 ? 'select' : ''" @click="change(0)">恢复权益</button>
					<span v-if="changeTitle === 0"></span>
				</view>
				<view class="btn">
					<button :class="changeTitle === 1 ? 'select' : ''" @click="change(1)">分值明细</button>
					<span v-if="changeTitle === 1"></span>
				</view>
			</view>
			<view class="huifu" v-if="changeTitle === 0">
				<view v-if="grade===0" class="huifu-status1">
					<view class="img">
						<image src="https://images.linglinggong.net/static/score/status1.png" mode=""></image>
					</view>
				</view>
				<view v-if="grade==1" class="huifu-status2">
					<view class="img">
						<image src="https://images.linglinggong.net/static/score/status2.png" mode=""></image>
					</view>
				</view>
				<view v-if="grade==2" class="huifu-status3">
					<view class="time"> 预计 <span class="bold">{{recoveryDay}}天{{recoveryTours}}小时</span> 后可再次接单 </view>
					<view class="huinuan" @click="buyScore(0)">
						<view>
							<view class="title"> 立即回暖 </view>
							<view class="score"> 实时分值回到60分 </view>
						</view>
						<view>
							<span>{{money}}元</span>
							<image src="https://images.linglinggong.net/static/finishInvite-jt.png" mode=""></image>
						</view>
					</view>
					<view class="img">
						<image src="https://images.linglinggong.net/static/score/status34.png" mode=""></image>
					</view>
				</view>
				<view v-if="grade==3" class="huifu-status4">
					<view class="time"> 预计 <span class="bold">{{recoveryDay}}天{{recoveryTours}}小时</span> 后可再次接单 </view>
					<view :style="{'visibility':isPayAccelerated?'hidden':''}" class="huinuan" @click="buyScore(1)">
						<view>
							<view class="title"> 加速回暖 </view>
							<view class="score" style="color: #FF851D;"> 回暖速度增加至{{accelerated}}分/日 </view>
						</view>
						<view>
							<span>{{money}}元</span>
							<image src="https://images.linglinggong.net/static/finishInvite-jt.png" mode=""></image>
						</view>
					</view>
					<view class="img">
						<image src="https://images.linglinggong.net/static/score/status34.png" mode=""></image>
					</view>
				</view>
				<view v-if="grade==4" class="huifu-status5">
					<view class="img">
						<image src="https://images.linglinggong.net/static/score/status5.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="fenzhi" v-else>
				<view class="item" v-for="item in flowList" :key="item.id">
					<view>
						<view class="title">
							{{item.name}}
						</view>
						<view class="time">
							{{item.createTime}}
						</view>
					</view>
					<view :style="{'color':item.score<0?'#FE4538':''}">
						<span v-if="item.score>0">+{{item.score}}</span>
						<span v-else>- {{-item.score}}</span>
					</view>
				</view>
			</view>
		</view>
		<ChangePay @closePayPage='closePayPage' v-if="isOpenModal" title='购买回暖' :monery='money'
			:url="type==0?`/t/user/pay_recovery_amount`:`/t/user/pay_recovery_amount_accelerate` "
			@paySuccess='paySuccess' keyWorld='account'>
		</ChangePay>
		<view style="position: fixed;">
			<canvas class="canvas" canvas-id="score2"></canvas>
		</view>
	</view>
</template>
<script>
	import jerryGauge from './jerry-gauge/index.vue'
	export default {
		components: {
			jerryGauge
		},
		data() {
			return {
				changeTitle: 0,
				accelerated: '',
				money: '', // 支付金额
				type: '', // 0立即回暖1加速回暖
				isOpenModal: false, // 是否打开支付弹窗
				focus: false, //键盘输入焦点
				isShowPassWordAnimation: false, //密码错误执行动画
				codeArr: [], //密码
				codeIndex: 1,
				ranges: [1, 2, 3, 4, 5, 6],
				isShowForgetPassword: false, //是否弹出忘记密码
				payType: 2, // 余额支付
				payPwd: '',
				grade: '', // 评分等级
				pageNum: 0,
				pageSize: 50,
				flowList: [], // 评分流水列表
				hasFlag: true, // 是否还有更多数据要加载
				isPayAccelerated: false, // 是否买过加速回暖
				sonRefresh: false, // 子组件刷新
				recoveryDay: '', //恢复天
				recoveryTours: '', //恢复小时
				// 评分动画
				ctx: {},
				startAngle: '',
				endAngle: '',
				width: 340,
				min: 0,
				max: 100,
				value: 0,
				unit: "",
				showTick: true,
				startAngle: 1.03 * Math.PI,
				endAngle: -0.03 * Math.PI,
				progressColor: ["#9C1313", "#F84A36", "#FF792E", "#FF7E34", "#FF8A40", "#FFB02C", "#FFCA4C", "#7EB213",
					"#8FB51A", "#67AE09"
				],
				valueColor: '',
				trackColor: '#E4E4E4',
				btmText: '',
				bgImg: '',
				radius: 170,
				process: 0 || -1,
				tickLength: 100,
				trackRadius: 165,
				tickRad: 0.0094 * Math.PI,
				lineWidth: 10,
				//评分动画
				canvasImage: '',
				isShowCanvasImage: false,
				animationFlag: false, // 动画效果展示完成之后才可以进行回暖操作
			};
		},
		onShareAppMessage() {
			return {
				title: "在家找日结兼职，工种齐全",
				desc: "免费使用，提前在家找日结兼职",
				path: `/pages/start-n/start-n`,
				imageUrl: 'https://images.linglinggong.net/static/employee-share.jpg',
				success: res => {}
			}
		},
		onShow() {
			this.getValue()
		},
		onLoad() {
			this.getScoreFlowing()
			uni.requestAnimationFrame = function(callback) {
				var lastTime = 0;
				var currTime = new Date().getTime();
				var timeToCall = Math.max(0, 16 - (currTime - lastTime));
				var id = setTimeout(function() {
					callback(1);
				}, 70);
				lastTime = currTime + timeToCall;
				return id;
			};
		},
		methods: {
			stringToDate(dateStr, separator) {
				if (!separator) {
					separator = "-";
				}
				var dateArr = dateStr.split(separator);
				var year = parseInt(dateArr[0]);
				var month;
				if (dateArr[1].indexOf("0") == 0) {
					month = parseInt(dateArr[1].substring(1));
				} else {
					month = parseInt(dateArr[1]);
				}
				var day = parseInt(dateArr[2]);
				var date = new Date(year, month - 1, day);
				return date;
			},
			async getValue() {
				let res = await this.$fetch(this.$api.get_ratings, {}, 'GET')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.value = Number(res.data.score)
				this.grade = Number(res.data.grade)
				console.log(this.value, 'this.value')
				this.get_recovery_amount_accelerate()
			},
			// 获取评分回暖金额-加速回暖
			async get_recovery_amount_accelerate() {
				if (this.grade == 2 || this.grade == 3) {
					console.log('zaizaiziaizai')
					let a = this.$api.get_recovery_amount_accelerate
					let b = this.$api.get_recovery_amount
					try {
						await this.$fetch(this.grade == 3 ? a : b, {}, 'GET').then(res => {
							if (res.code) return uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							let speed = res.data.mediumRange
							this.money = res.data.amount
							let sdate = this.stringToDate(res.data.recoveryTime)
							let now = (new Date()).valueOf()
							sdate = (sdate).valueOf()
							let tours = sdate - now
							this.recoveryDay = parseInt(tours / (1000 * 60 * 60 * 24));
							var tour = parseInt(tours / (1000 * 60 * 60))
							this.recoveryTours = tour - this.recoveryDay * 24
							console.log(this.bgImg, this.btmText, this.grade, 'aaaaaaaaaaaaaaaaaa')
							if (this.grade == 2) {
								this.bgImg = "/static/score/orangeScore.png"
								this.btmText = `已停止接单，回暖${speed}分/日`
							} else if (this.grade == 3) {
								this.bgImg = "/static/score/light-redScore.png"
								this.btmText = `已停止接单，回暖${speed}分/日`
								this.accelerated = res.data.accelerated
								if (res.data.purchase == 1) {
									this.isPayAccelerated = true
								}
							}
							console.log('重绘')
							this.$nextTick(() => {
								this.start()
							})
						})
					} catch (e) {}
				} else {
					if (this.grade == 0) {
						this.valueColor = "#62B707"
						this.bgImg = "/static/score/greenScore.png"
						this.btmText = "服务越好，任务越多"
					} else if (this.grade == 1) {
						this.bgImg = "/static/score/yellowScore.png"
						this.btmText = "保持分值，努力加油"
					} else if (this.grade == 4) {
						this.bgImg = "/static/score/redScore.png"
						this.btmText = "已封禁"
					}
					this.$nextTick(() => {
						this.start()
					})
				}
			},
			// 轨迹圆环
			drawTrack() {
				this.ctx.save()
				this.ctx.beginPath()
				this.ctx.lineWidth = this.lineWidth
				this.ctx.lineJoin = 'round'
				this.ctx.lineCap = "round"
				this.ctx.strokeStyle = this.trackColor
				this.ctx.arc(0, 0, 150, this.startAngle, this.endAngle)
				this.ctx.stroke()
				this.ctx.restore()
			},
			// 当前值显示
			drawValueText() {
				this.ctx.save()
				this.ctx.fillStyle = this.valueColor
				this.ctx.font = "normal normal bolder 48px PingFangSC-Regular"
				this.ctx.textAlign = 'center'
				this.ctx.textBaseline = 'middle'
				this.ctx.fillText(`${this.value}${this.unit}`, 0, -50)
				this.ctx.restore()
			},
			// 进度圆环
			drawProgress() {
				this.ctx.save()
				const valueRad = this.getValueRad()
				this.ctx.beginPath()
				this.ctx.lineWidth = this.lineWidth
				this.ctx.strokeStyle = typeof this.progressColor === 'string' ? this.progressColor : this.getGradient(this
					.progressColor)
				this.ctx.lineJoin = 'round'
				this.ctx.lineCap = "round"
				// 终点角度是动态的
				this.ctx.arc(0, 0, 150, this.startAngle, valueRad)
				this.ctx.stroke()
				this.ctx.restore()
			},
			drawProgressRadio() {
				this.ctx.save()
				const valueRad = this.getValueRad()
				this.ctx.beginPath()
				this.ctx.lineWidth = this.lineWidth + 8
				var gradient = this.ctx.createLinearGradient(-170, 0, 170, 0);
				this.progressColor.forEach((color, index) => {
					gradient.addColorStop(index / (this.progressColor.length - 1), color)
				})
				this.ctx.strokeStyle = gradient
				this.ctx.lineJoin = 'round'
				this.ctx.lineCap = "round"
				// 终点角度是动态的
				this.ctx.arc(0, 0, 150, valueRad - 0.005, valueRad)
				this.ctx.stroke()
				this.ctx.restore()
			},
			drawProgressBigRadio() {
				this.ctx.save()
				const valueRad = this.getValueRad()
				this.ctx.beginPath()
				this.ctx.lineWidth = this.lineWidth + 14
				this.ctx.strokeStyle = "#fff";
				this.ctx.lineJoin = 'round'
				this.ctx.lineCap = "round"
				// 终点角度是动态的
				this.ctx.arc(0, 0, 150, valueRad - 0.005, valueRad)
				this.ctx.stroke()
				this.ctx.restore()
			},
			// 指示三角形
			drawProgressTriangle() {
				this.ctx.save()
				const valueRad = this.getValueRad()
				this.ctx.beginPath()
				this.ctx.lineWidth = this.lineWidth + 5
				let gra = this.ctx.createLinearGradient(-90, 0, 90, 0);
				this.progressColor.forEach((color, index) => {
					gra.addColorStop(index / (this.progressColor.length - 1), color)
				})
				this.ctx.strokeStyle = gra
				// this.ctx.lineCap = "square"
				// 终点角度是动态的
				this.ctx.arc(0, 0, 90, valueRad - 0.02, valueRad)
				this.ctx.stroke()
				this.ctx.restore()
			},
			// 刻度线
			drawTick() {
				// 不可是使用旋转，否则文字也会旋转
				let deg = this.startAngle
				for (let i = this.min; i <= this.max; i++) {
					this.ctx.save()
					this.ctx.lineWidth = this.ctx.strokeStyle = '#999'
					this.ctx.beginPath()
					// 刻度起点
					let x0 = (this.radius - this.lineWidth - 34) * Math.cos(deg)
					let y0 = (this.radius - this.lineWidth - 34) * Math.sin(deg)
					// 刻度终点
					var x1 = (this.radius - this.lineWidth - 28) * Math.cos(deg)
					var y1 = (this.radius - this.lineWidth - 28) * Math.sin(deg)
					this.ctx.moveTo(x0, y0)
					if ([0, 20, 40, 60, 80, 100].includes(i)) {
						this.ctx.lineTo(x1, y1)
					}
					deg += this.tickRad
					this.ctx.stroke()
					this.ctx.restore()
				}
			},
			// 刻度值
			drawTickText() {
				let deg = this.startAngle
				for (let i = this.min; i <= this.max; i++) {
					let x = (this.radius - this.lineWidth - 50) * Math.cos(deg)
					let y = (this.radius - this.lineWidth - 50) * Math.sin(deg)
					deg += this.tickRad
					if (this.bgImg) {
						this.ctx.drawImage(this.bgImg, -83, -24, 166, 24)
					}
					this.ctx.save()
					this.ctx.font = 'normal normal 500 12px PingFangSC-Regular'
					this.ctx.fillStyle = '#0E0E0E'
					this.ctx.textAlign = 'center'
					this.ctx.fillText(`${this.btmText}`, 0, -8);
					// 不设置会与tick错位
					this.ctx.textBaseline = 'middle'
					if ([0, 20, 40, 60, 80, 100].includes(i)) {
						this.ctx.fillText(i, x, y)
					}
					this.ctx.restore()
				}
			},
			// 当前值的弧度
			getValueRad() {
				// 超出
				if (this.value > this.max) {
					return (this.max - this.min) * this.tickRad + this.startAngle
				}
				return (this.process - 4 - this.min) * this.tickRad + this.startAngle
			},
			start() {
				let update = () => {
					this.process = this.process + 5
					if (this.process > this.value + 5) {
						uni.cancelAnimationFrame(update)
						setTimeout(() => {
							uni.canvasToTempFilePath({
								width: 340,
								height: 340,
								quality: 1,
								canvasId: 'score',
								success: (res) => {
									// 在H5平台下，tempFilePath 为 base64
									this.canvasImage = res.tempFilePath
								},
								complete: (res) => {
									this.animationFlag = true;
								},
							})
						}, 300)
					} else {
						this.draw()
						uni.requestAnimationFrame(update)
					}
				}
				uni.requestAnimationFrame(update);
			},
			// 渐变
			getGradient(colorList) {
				let grd = this.ctx.createLinearGradient(-170, 0, 170, 0)
				colorList.forEach((color, index) => {
					grd.addColorStop(index / (colorList.length - 1), color)
				})
				return grd
			},
			// 白色背景
			drawBg() {
				this.ctx.save()
				this.ctx.arc(0, 0, 170, 1 * Math.PI, 2 * Math.PI)
				this.ctx.fill()
				this.ctx.fillStyle = "#FFFFFF";
				this.ctx.restore()
			},
			draw() {
				this.ctx = uni.createCanvasContext('score', this)
				this.ctx.fillStyle = "#FFFFFF";
				this.ctx.translate(170, 200)
				this.drawBg()
				this.drawTrack()
				this.drawValueText()
				this.drawProgress()
				this.drawProgressBigRadio()
				this.drawProgressRadio()
				this.drawProgressTriangle()
				if (this.showTick) {
					this.drawTick()
					this.drawTickText()
				}
				this.ctx.draw()
				this.ctx.fillStyle = "#FFFFFF";
			},
			closePayPage() {
				this.isOpenModal = false
			},
			// 付款成功
			paySuccess() {
				this.process = 0 || -1
				this.isShowCanvasImage = false
				this.getScoreFlowing()
				this.getValue()
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			change(val) {
				this.changeTitle = val
				console.log('val', val)
			},
			goRule() {
				uni.navigateTo({
					url: '/pages/syncAppNewPage/score/score-rule'
				})
			},
			handleCloseModal() {
				this.isOpenModal = false
				this.payPwd = ''
				this.codeArr = []
				this.codeIndex = 1
			},
			emptyInput() {
				this.isShowPassWordAnimation = true
				this.isShowForgetPassword = true
				this.payPwd = ''
				this.codeArr = []
				this.codeIndex = 1
				setTimeout(() => {
					this.isShowPassWordAnimation = false
				}, 1200)
			},
			//点击链接至账户安全。
			toRePasssWord() {
				uni.navigateTo({
					url: '/pages/account-security/account-security'
				})
			},
			getPayCode(e) {
				let {
					value
				} = e.detail
				let del = false
				this.payPwd = value
				if (value.length < this.codeArr.length) {
					del = true
				}
				this.codeArr.length = value.length
				this.codeArr.fill("●")
				this.codeIndex = this.codeArr.length + 1
				if (del) {
					return
				}
				this.codeArr[value.length - 1] = value[value.length - 1]
				setTimeout(() => {
					if (this.codeArr.length != 0) {
						this.$set(this.codeArr, [this.codeArr.length - 1], "●")
					}
				}, 1000)
				if (this.codeIndex == 7) {
					this.handleComfirmPay()
				}
				console.log('codeArr', this.codeIndex, this.codeArr)
			},
			// 获取评分流水
			async getScoreFlowing() {
				if (!this.hasFlag) return // 说明已经没有更多啦

				++this.pageNum
				let res = await this.$fetch(this.$api.get_ratings_flowing, {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}, 'POST')
				console.log('获取流水', res)
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				// 拼接
				this.flowList = [...this.flowList, ...res.rows, ]
				this.hasFlag = this.flowList.length < res.total
			},
			buyScore(type) {
				if (this.animationFlag) {
					this.isShowCanvasImage = true
					this.isOpenModal = true
					this.focus = true
					this.type = type
				}
			},
			// 购买评分回暖金额-立即回暖,加速回暖
			async handleComfirmPay() {
				let res = ''
				if (this.type == 0) {
					res = await this.$fetch(
						`${this.$api.pay_recovery_amount}?payType=${this.payType}&payPwd=${this.payPwd}`, {}, 'GET'
						)
				} else if (this.type == 1) {
					res = await this.$fetch(
						`${this.$api.pay_recovery_amount_accelerate}?payType=${this.payType}&payPwd=${this.payPwd}`, {},
						'GET')
				}
				console.log(res)
				if (res.code) {
					this.emptyInput()
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					return
				} else {
					this.isOpenModal = false
					this.handleCloseModal()
					uni.showToast({
						title: '购买成功~',
						icon: 'none'
					})
					this.sonRefresh = true
					this.getScoreFlowing()
				}
				console.log('购买评分回暖金额-加速回暖', res)
			},
			onReachBottom() {
				this.getScoreFlowing()
			},
			// onPullDownRefresh() {
			// 	this.refresh()
			// },
		},
	}
</script>
<style lang="less" scoped>
	.container {
		background: #fff;
		min-height: 100vh;
		height: 100%;

		.status1 {
			background: linear-gradient(#A5FF4B, #58AB06);
		}

		.status2 {
			background: linear-gradient(#FFD65C, #FFA61D);
		}

		.status3 {
			background: linear-gradient(#FFA35C, #FF6A1D);
		}

		.status4 {
			background: linear-gradient(#FF835C, #FF4B1D);
		}

		.status5 {
			background: #9C1313;
		}

		.topRound {
			width: 100%;
			height: 616rpx;
			position: relative;

			.round {
				position: absolute;
				bottom: -155px;
				left: 50%;
				margin-left: -190px;

				.gauge-container {
					padding: 20rpx 40rpx;
					text-align: left;

					.canvas {
						width: 340px;
						height: 340px;
						transition: all linear 4s;
					}
				}
			}

			.nav {
				width: 690rpx;
				height: 44px;
				color: #262626;
				padding: 0 30rpx;
				padding-top: 70rpx;
				position: relative;
				text-align: center;
				line-height: 44px;

				.icon-back {
					position: absolute;
					left: 0;
				}

				.title-score {
					font-size: 40rpx;
					font-weight: 600;
				}

				.rule {
					position: fixed;
					top: 170rpx;
					right: 0;
					z-index: 999;
					height: 68rpx;
					line-height: 68rpx;
					font-size: 32rpx;
					color: #FFFFFF;
					background-color: rgba(0, 0, 0, .7);
					border-radius: 36rpx 0rpx 0rpx 36rpx;
					padding: 0 30rpx;
				}
			}
		}

		.list {
			width: 100%;
			padding-top: 50rpx;
			z-index: 66;

			.change {
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				color: #262626;
				font-size: 32rpx;

				.btn {
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;

					button {
						display: block;
						padding: 0;
						line-height: 50rpx;
						background: #fff;
					}

					button::after {
						border: none;
					}

					.select {
						font-size: 36rpx;
						font-weight: bold;
					}

					span {
						display: block;
						width: 60rpx;
						height: 4rpx;
						background: #FF851D;
						border-radius: 4rpx;
						margin-top: 10rpx;
					}
				}
			}

			.huifu {
				width: 100%;

				.huifu-status1,
				.huifu-status2,
				.huifu-status5 {
					display: flex;
					justify-content: center;
					align-items: center;

					.img {
						margin-top: 30%;
						width: 506rpx;
						height: 392rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.huifu-status3,
				.huifu-status4 {
					.time {
						width: 100%;
						text-align: center;
						margin-top: 80rpx;

						.bold {
							font-weight: bold;
							margin: 0 10rpx;
						}
					}

					.huinuan {
						width: 694rpx;
						height: 130rpx;
						margin: 60rpx auto 60rpx auto;
						box-sizing: border-box;
						padding: 0 50rpx;
						background-color: #F1F1F5;
						font-size: 32rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-radius: 12rpx;

						view:first-child {
							.title {
								font-weight: bold;
								line-height: 50rpx;
							}

							.score {
								color: #515151;
								font-size: 24rpx;
							}
						}

						view:last-child {
							image {
								width: 25rpx;
								height: 25rpx;
							}
						}
					}

					.img {
						width: 100%;
						height: 392rpx;
						text-align: center;

						image {
							width: 506rpx;
							height: 392rpx;
						}
					}
				}
			}

			.fenzhi {
				padding: 0 20rpx;

				.item {
					width: 100%;
					height: 148rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid rgba(136, 139, 146, 0.30);

					view:first-child {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.title {
							color: #1A1A1A;
							font-size: 32rpx;
							line-height: 60rpx;
						}

						.time {
							color: #515151;
							font-size: 28rpx;
						}
					}

					view:last-child {
						color: #4E9900;
						font-size: 36rpx;
					}
				}
			}
		}

		.share-modal {
			z-index: 11;
			position: fixed;
			bottom: 0;
			height: 100vh;
			width: 100vw;
			background-color: rgba(0, 0, 0, 0.40);
			display: flex;
			align-items: center;
			justify-content: center;

			&>.main {
				position: relative;
				top: -100rpx;
				width: 570rpx;
				// height: 250rpx;
				padding: 30rpx;
				background: #FFFFFF;
				box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.05) inset;
				border-radius: 17px;
				line-height: 40rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				&>.modal-title {
					font-size: 32rpx;
					font-weight: 600;
					margin-top: 20rpx;

					// margin: 30rpx 0 50rpx;
					&>.imgs {
						position: relative;

						image {
							position: absolute;
							top: 0rpx;
							bottom: 0;
							right: -80rpx;
							width: 50rpx;
							height: 40rpx;
						}
					}
				}

				.modal-content {
					width: 100%;
					height: 240rpx;

					// border: 1px solid;
					.modal-content-line {
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 30rpx 30rpx;
					}

					.modal-content-money {
						width: 100%;
						height: 100rpx;
						margin-top: -10rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						// border:1px solid;
						.rmb {
							font-size: 40rpx;
							color: #333333;
							margin-right: 10rpx;
							font-weight: 600;
							margin-top: 15rpx;
						}

						.rmb-num {
							font-size: 66rpx;
							color: #333333;
							font-weight: 600;
						}
					}

					.modal-content-type {
						width: 92%;
						margin: 0 auto;
						height: 80rpx;
						// border: 1px solid;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.modal-content-type-left {}

						.modal-content-type-right {
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 40rpx;
								height: 100%;
							}

							text {
								margin-left: 6rpx;
								color: #333333;
								font-size: 26rpx;
							}
						}
					}
				}

				&>.pay-code {
					padding-bottom: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
					position: relative;

					&>input {
						position: absolute;
						top: 0;
						left: -100%;
						width: 200%;
						height: 100%;
						text-align: left;
						z-index: 9;
						opacity: 1;
					}

					&>.box {
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						width: 80rpx;
						height: 80rpx;
						margin-right: 10rpx;
						font-size: 22px;
						line-height: 90rpx;
						box-sizing: border-box;
						background-color: #F2F2F2;
						border-radius: 2px;

						&:last-child {
							margin-right: 0;
						}
					}

					&>.active {
						border: 2rpx solid #cccccc;

						@keyframes twinkling {
							0% {
								opacity: 0.1;
							}

							50% {
								opacity: 0.8;
							}

							100% {
								opacity: 0.1;
							}
						}

						&>.line {
							display: block;
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
							width: 2upx;
							height: 40upx;
							background: #333333;
							animation: twinkling 1s infinite ease;
						}
					}
				}

				.repwd {
					height: 62rpx;
					margin-bottom: -30rpx;
					font-size: 24rpx;
					color: #9999 99;
					// border: 1px solid;
					width: 92%;
					margin: 0 auto;
					display: flex;
					justify-content: flex-end;
					align-items: center;
				}

				&>.button {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 180rpx;
					height: 70rpx;
					margin-top: 60rpx;
					border-radius: 50rpx;
					background-color: #FCC928;

					&:active {
						opacity: 0.7;
					}
				}

				&>.close {
					position: absolute;
					right: 30rpx;
					top: 30rpx;
					width: 42rpx;
					height: 42rpx;
				}
			}
		}
	}
</style>